<template>
  <view>
    <view class='cash-withdrawal'>
      <uv-sticky :offsetTop="0"  :customNavHeight="0" bgColor="#fff">
        <view class="heightWrapper">
        <view class="wrapper" :style="{
            background:'linear-gradient(to top,' + themConfig.theme.subColor + ',' + themConfig.theme.color + ')'
          }">
          <view class="balance">
            <view class="balance-text">可提现（元）</view>
            <view class="balance-amount">
              {{ accountInfo.balance || 0 }}
            </view>
            <view @click="clickSettle">点击提现</view>
          </view>
        </view>

        <view>
          <uv-tabs :customStyle="{backgroundColor:'white'}" :lineColor="themConfig.theme.color" @change="tabChange"
                   :current="activeSubIndex" :list="tabSubList"></uv-tabs>
        </view>
      </view>
      </uv-sticky>
      <PageBody :properties="pageBody">
        <template v-slot:body>
          <view class="order-list-wrapper">
            <view class="order-list" v-if="dataList.length">
              <view class="ordercard" v-for="order in dataList">
                <view class="order-top">
                  <view style="display:flex;">
                    <text>提现</text>
                    <text :style="{
                      color: themConfig.theme.color,
                      fontSize:'16px',
                      marginLeft:'20rpx'
                    }">+{{ order.amount }}
                    </text>
                  </view>

                  <view style="display:flex;">
                    <view>
                      <uv-text text="到账"></uv-text>
                    </view>
                    <view style="margin-left: 20rpx">
                      <uv-text size="16" :color="themConfig.theme.color" :text="'+'+order.actualAmount"/>
                    </view>
                  </view>

                  <view style="display:flex;">
                    <view>
                      <uv-text text="手续费"></uv-text>
                    </view>
                    <view style="margin-left: 20rpx">
                      <uv-text size="16" :color="themConfig.theme.color" :text="'-'+order.fee"/>
                    </view>
                  </view>

                  <view style="display: flex">
                    <text>{{ order.orderName }}</text>
                    <Dict :properties="{dictType:'settle_state',dictValue:order.state,size:'mini'}"/>
                  </view>
                </view>

                <uv-gap height="15" bgColor=""></uv-gap>


                <view class="order-bottom">
                  <view class="time-text" style="display: flex">
                    <text>收款账户：</text>
                    <uv-text v-if="order.collectionChannel==='2' || order.collectionChannel===null" :text="order.accountInfo"/>
                    <uv-tags plain v-if="order.collectionChannel" style="margin-left: 5px" type="success" :text="order.collectionChannel==='1'?'支付宝':order.collectionChannel==='2'?'银行卡':'微信'"/>
                  </view>
                </view>

                <uv-gap height="15" bgColor=""></uv-gap>

                <view class="order-bottom">
                  <view class="time-text" style="display: flex;flex-direction: row">
                    <view>
                      <uv-text text="提现备注："/>
                    </view>
                    <uv-text :text="order.memberRemark||'无'"/>
                  </view>
                </view>

                <uv-gap v-if="order.failReason" height="15" bgColor=""></uv-gap>
                <view class="order-bottom" v-if="order.failReason">
                  <view class="time-text" style="display: flex;flex-direction: row">
                    <uv-text :text="'审核备注：'+order.failReason"/>
                  </view>
                </view>

                <view v-if="order.photos && order.photos.length>0">
                  <uv-gap height="15" bgColor=""></uv-gap>
                  <view class="time-text" style="display: flex;flex-direction: row">
                    <view>
                      <uv-text text="转账凭证："/>
                    </view>
                    <uv-image @click="imgOpenLager(item)" v-for="item in order.photos" :height="50" radius="10" width="50" :src="item"></uv-image>
                  </view>
                </view>

                <uv-gap height="15" bgColor=""></uv-gap>

                <view class="order-bottom">
                  <view class="time-text" style="display: flex;justify-content: space-between;align-items:center;flex-direction: row;width: 100%">
                    <view>
                      <uv-text size="14" color="#909399" :text="'申请时间：'+order.createTime"/>
                    </view>
<!--                     -->
                      <uv-button @click="userConfirm(order)" v-if="order.transferType===3 && order.state===3 && order.packageInfo" type="success" size="small">确认收款</uv-button>
                  </view>
                </view>
              </view>
            </view>
            <view v-else>
              <Empty :show="true"/>
            </view>

            <uv-load-more v-if="isReachBottom" @loadmore="loadmore"
                          :status="loading.status"
                          :loading-text="loading.loadingText"
                          :loadmore-text="loading.loadmoreText"
                          nomore-text=" "/>
            <uv-gap height="2" bgColor=""></uv-gap>
          </view>
        </template>
      </PageBody>
    </view>
    <uv-popup ref="popup" mode="bottom">
      <view style="padding: 40rpx;background: none">
        <uv-form labelPosition="left" :model="formData" :labelWidth="80" :rules="rules" ref="form">
          <view class="infoCard">
            <uv-form-item label="可提现金额" prop="amount" borderBottom>
              <template v-slot:right>
                <uv-input inputAlign="right" readonly placeholder="提现金额" v-model="formData.amount" border="none">
                </uv-input>
              </template>
            </uv-form-item>

            <uv-form-item label="预计到账" prop="actualAmount" borderBottom>
              <template v-slot:right>
                <uv-input inputAlign="right" readonly placeholder="预计到账" v-model="formData.actualAmount" border="none">
                </uv-input>
              </template>
            </uv-form-item>

            <uv-form-item label="手续费" prop="actualAmount" borderBottom>
              <template v-slot:right>
                <uv-input inputAlign="right" readonly placeholder="提现手续费" v-model="formData.fee" border="none">
                </uv-input>
              </template>
            </uv-form-item>

            <view style="display: flex;justify-content: center;width: 100%;margin-top: 20rpx">
              <view>
                <uv-text prefixIcon="warning" color="#909399" :text="formData.tip"/>
              </view>
            </view>
          </view>

          <view class="infoCard">
            <uv-form-item label="联系方式" prop="concatPhone" borderBottom>
              <template v-slot:right>
                <uv-input inputAlign="right" placeholder="联系方式" v-model="formData.concatPhone" border="none">
                </uv-input>
              </template>
            </uv-form-item>

            <uv-form-item label="提现账户" prop="balance" borderBottom>
              <template v-slot:right>
                <uv-text :text="formData.accountInfo"></uv-text>
              </template>
            </uv-form-item>

            <uv-form-item label="提现备注" prop="memberRemark" borderBottom>
              <template v-slot:right>
                <uv-input style="width: 100%" inputAlign="right" placeholder="提现备注" v-model="formData.memberRemark" border="none">
                </uv-input>
              </template>
            </uv-form-item>
          </view>

          <view style="display: flex;justify-content: center;width: 100%">
            <view>
              <uv-text prefixIcon="warning" color="#909399" text="发起申请后,一般48小时到账,请耐心等待"/>
            </view>
          </view>

          <view style="width: 100%;margin-top: 20px">
            <uv-button @click="submit" text="提交"
                       :disabled="!formData.allow"
                       :color="'linear-gradient(to right,' + themConfig.theme.subColor + ',' + themConfig.theme.color + ')'"></uv-button>
          </view>
        </uv-form>
      </view>
    </uv-popup>
  </view>
</template>
<script>
import {mixins} from './index.js'

export default {
  mixins: [mixins]
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
